<template>
  <div style="width:100%;height:100%;">
    <div :ref="name" style="width:100%;height:100%;" />
    <div v-if="config.showSelect" class="select">
      <Select :id="id" :key="id" />
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { query } from '@/components/@mixins/query.js'
import { params } from '@/components/@mixins/params.js'
import { props } from '@/components/@mixins/props.js'
import { bus } from '@/components/@mixins/bus.js'
import Select from '@/components/@plugins/select'
import { getOption } from './import'
export default {
  name: 'ECharts',
  components: {
    Select
  },
  mixins: [query, props, params, bus],
  data() {
    return {
      renderData: [],
      op: ''
    }
  },
  mounted() {
    this.getServeData().then(res => {
      this.renderData = res
      this.initChart()
      window.addEventListener('resize', this.resize)
    })
  },
  beforeDestroy() {
    this.EC?.dispose()
    delete this.EC
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    initChart() {
      this.EC = echarts.init(this.$refs[this.name])
      this.op = getOption(this.name, this.dealData(this.renderData), this.config)
      this.EC.setOption(this.op, true)
    },
    /**
     * 将接口返回的数据处理为统一的格式，如下
     * [
     *    legendName:'example',
     *    data:[
     *       {name:'1',value:1},
     *       {name:'2',value:2},
     *       {name:'3',value:3}
     *    ]
     * ]
     */
    dealData(data) {
      // console.log(this.id)
      if (data?.length === 0) {
        data = [{
          legendName: '暂无数据',
          data: [{ name: '暂无数据', value: 0 }]
        }]
      }
      return data
    },
    resize() {
      this.EC.resize()
    }
  }
}
</script>
<style>
.select{
  width: 100px;
  position: absolute;
  right: 0;
  top: -20px;
}
</style>
